<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>j</title>
	<link rel="stylesheet" href="css/cs.css" type="text/css">
	
</head>
<body>
    <table border="1">
	  <tt><th colspan="5" class="tableheader">购物清单</th></tt>
		<tbody>
		  <tr>
		    <th>序号</th>
		    <th>商品</th>
		    <th>单价</th>
		    <th>数量</th>
		    <th>操作</th>
		  </tr>
		  <tr>
		    <td>1</td>
		    <td>商品1</td>
		    <td>30</td>
		    <td>3</td>
		    <td>
			    <button onclick="delRow(this)">删除</button>
			    <button class="addbtn">添加</button>
		    </td>
		  </tr>
	       <tr>
	        <td>2</td>
		    <td>商品2</td>
		    <td>36</td>
		    <td>31</td>
		    <td>
			    <button onclick="delRow(this)">删除</button>
			    <button class="addbtn">添加</button>
		    </td>
		  </tr>
		  <tr>
		    <td>3</td>
		    <td>商品3</td>
		    <td>15</td>
		    <td>6</td>
		    <td>
			    <button onclick="delRow(this)">删除</button>
			    <button class="addbtn">添加</button>
		    </td>
		  </tr>
		  <tr>
		    <td>4</td>
		    <td>商品4</td>
		    <td>5</td>
		    <td>8</td>
		    <td>
			    <button onclick="delRow(this)">删除</button>
			    <button class="addbtn">添加</button>
		    </td>
		  </tr>
		  	<tr>
		  	<td>5</td>
		    <td>商品5</td>
		    <td>5.8</td>
		    <td>81</td>
			<td>
			    <button onclick="delRow(this)">删除</button>
			    <button class="addbtn">添加</button>
	        </td>
		    </tr>
		  	<tr>
		  	<td>6</td>
		    <td>商品6</td>
		    <td>55</td>
		    <td>81</td>
		    <td>
			    <button onclick="delRow(this)">删除</button>
			    <button class="addbtn">添加</button>
		    </td>
		    </tr>
		  	<tr>
		  	<td>7</td>
		    <td>商品7</td>
		    <td>15</td>
		    <td>2</td>
		    <td>
			    <button onclick="delRow(this)">删除</button>
			    <button class="addbtn">添加</button>
		    </td>

		  </tr>

		  <tr>
		  <th colspan="5"><p>总计</p></th>
          </tr>

	    </tbody>
    </table>

    <div class="shade"  style="display:none;">
       <div class="form-panel">
          <h5 class="form-header">请输入表单信息</h5>
          <div class="form-inner">
             <input type="text" name="goods" value="" placeholder="请输入商品名称">
             <input type="text" name="price" value="" placeholder="请输入商品单价">
             <input type="text" name="num" value="" placeholder="请输入商品数量">
             <div class="ops">
               <button class="confirmbtn">确认</button>
               <button class="canclebtn">取消</button>
             </div>
          </div>
          <!--叉-->
          <div class="cha">
             <em></em>
          </div>
       </div>
    </div>

   <script type="text/javascript" src="js/jquery-3.1.1.js"></script>
   <script type="text/javascript">
   	var calcSum =  function(){
		var sum =0;
		$('tbody tr').each(function(){
			var price = $(this).find('td:eq(2)').text();
			var num = $(this).find('td:eq(3)').text();
			var total = price*num;
			sum +=total;
		})

		$('#sum').text(sum);
	};

	calcSum();
      $("tbody tr:odd").addClass("even");
   /*
      eq(0)         等于
      gt(0)         大于
      lt(1)         小于
      $("tbody tr:gt(1):lt(5)").css("background-color","green");
    */
      function delRow(tb) {
      	$(tb).parent().parent().remove();
      	$('tbody tr').show();
      	$('tbody tr:odd').addClass('odd');

      	for (var i = 0; i < $('tbody tr').length; i++) {
      		$('tbody tr:eq('+i+')').find('td:first').text(i-1);
      	}
      }
      $(".cha").click(function(){
      	$(".shade").hide();
      	$('input[name=goods]').val('');
      	$('input[name=price]').val('');
      	$('input[name=num]').val('');
      });

       /**表格行中的添加事件**/
      $('.addbtn').click(function(){
      	  $('.shade').show();
      })

      var showForm=function(){
      	$('.shade').show();
      }

       /**弹框中的确定**/
      $('.confirmbtn').click(function(){
      	$('.shade').hide();

      	/**先获取tbody中的行数**/
      	var ntr = $('tbody tr').length;
      	var sn =$('tbody tr:eq(' +(ntr-2)+')').find('td:first').text();

      	var name=$('input[name=goods]').val();
      	var price=$('input[name=price]').val();
      	var num=$('input[name=num]').val();
        var tr ='<tr><td>'+(parseInt(sn)+1)+'</td><td>'+name+'</td><td>'+price+'</td><td>'+num+'</td><td><button onclick="delRow(this)">删除</button> <button onclick="showForm()">添加</button></td></tr>';
        $('tbody tr:eq('+(ntr-2)+')').after(tr);
      })

        /**弹框中的取消**/
       $('.canclebtn').click(function(){
      	$('.shade').hide();
       })
   </script>
</body>
</html>
